<template>
  <div>
    <button style="margin: 20px; padding:10px 20px" @click="hideGrid">
      隐藏网格
    </button>
    <button
      style="margin: 20px; padding:10px 20px"
      @click="changeSize('small')"
      :class="{ active: size === 'small' }"
    >
      small
    </button>
    <button
      style="margin: 20px; padding:10px 20px"
      @click="changeSize('medium')"
      :class="{ active: size === 'medium' }"
    >
      medium
    </button>
    <button
      style="margin: 20px; padding:10px 20px"
      @click="changeSize('large')"
      :class="{ active: size === 'large' }"
    >
      large
    </button>

    <drug-layout v-model="dragData" :isHideGrid="isHideGrid" :size="size">
    </drug-layout>
    <div>{{ dragData }}</div>
  </div>
</template>

<script>
import DrugLayout from "./DrugLayout";
export default {
  props: {},
  components: { DrugLayout },
  data() {
    return {
      isHideGrid: true,
      dragData: [
        {
          width: 320,
          height: 200,
          top: 10,
          left: 10,
          type: "parent",
          name: "001",
          sizeType: "medium",
          child: [
            {
              top: 70,
              left: 0,
              direction: "vertical",
              name: "bed-001"
            },
            {
              top: 70,
              left: 100,
              direction: "vertical",
              name: "bed-002"
            },
            {
              top: 70,
              left: 180,
              direction: "horizontal",
              name: "bed-003"
            }
          ]
        },
        {
          top: 10,
          left: 460,
          width: 320,
          height: 200,
          type: "parent",
          name: "002",
          sizeType: "medium",
          child: [
            {
              top: 70,
              left: 0,
              direction: "horizontal",
              name: "bed-004"
            },
            {
              top: 70,
              left: 100,
              direction: "vertical",
              name: "bed-005"
            },
            {
              top: 70,
              left: 200,
              direction: "vertical",
              name: "bed-006"
            }
          ]
        },
        {
          top: 10,
          left: 920,
          width: 320,
          height: 200,
          type: "parent",
          name: "003",
          sizeType: "medium",
          child: [
            {
              top: 70,
              left: 0,
              direction: "horizontal",
              name: "bed-007"
            },
            {
              top: 70,
              left: 100,
              direction: "horizontal",
              name: "bed-008"
            },
            {
              top: 70,
              left: 200,
              direction: "horizontal",
              name: "bed-009"
            }
          ]
        },
        {
          top: 250,
          left: 720,
          width: 90,
          height: 120,
          direction: "vertical",
          type: "child",
          name: "bed-010",
          sizeType: "medium"
        },
        {
          top: 550,
          left: 720,
          width: 120,
          height: 120,
          type: "parent",
          direction: "vertical",
          name: "",
          sizeType: "medium",
          model: "function",
          isEdit: true
        }
      ],
      size: "medium"
    };
  },
  mounted() {
    // this.initData();
  },
  methods: {
    hideGrid() {
      this.isHideGrid = !this.isHideGrid;
    },
    initData() {
      const sizeData = {
        small: {
          width: 64,
          height: 90
        },
        medium: {
          width: 90,
          height: 120
        },
        large: {
          width: 120,
          height: 150
        }
      };
      this.dragData = this.dragData.map(ele => {
        const len = ele.child && ele.child.length;
        ele.width = len
          ? len * sizeData[ele.sizeType].width + len * 50
          : sizeData[ele.sizeType].width;
        ele.height = len ? 200 : sizeData[ele.sizeType].height;
        return ele;
      });
    },
    changeSize(val) {
      this.size = val;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.active {
  background-color: #d3ffc9;
  outline: none;
  transition: all 0.3s;
}
</style>
